<template>
	<view>
        <!-- 黑胶会员 -->
		<view class="sidebar_vip">
			<image src="../../static/sidebar/vip.png"></image>
			<text class="sidebar_vip_text1">会员中心</text>
			<text class="sidebar_vip_text2">已过期401天,我的VIP</text>
			<text class="sidebar_vip_text3">黑胶VIP每天仅0.3元!专属优惠</text>
		</view>
		<!-- 我的消息 -->
		<view class="sidebar_xinxi">
			<view class="sidebar_xinxi_1">
				<image src="../../static/sidebar/email.png" mode="" class="sidebar_xinxi_image1"></image>
				<text class="sidebar_xinxi_text2">我的消息</text>
				<text class="sidebar_xinxi_text1">7</text>
				<image class="sidebar_xinxi_image2" src="../../static/jiantou.png"></image>
			</view>
			<view class="sidebar_xinxi_1">
				<image src="../../static/sidebar/beike.png" mode="" class="sidebar_xinxi_image1"></image>
				<text class="sidebar_xinxi_text2">云贝中心</text>
				<text class="yunbei">80云贝待领取</text>
				<image class="sidebar_xinxi_image2" src="../../static/jiantou.png"></image>
			</view>
			<view class="sidebar_xinxi_1 head">
				<image src="../../static/sidebar/head.png" mode="" class="sidebar_xinxi_image1"></image>
				<text class="sidebar_xinxi_text2">创作者中心</text>
				<image class="sidebar_xinxi_image2 " src="../../static/jiantou.png"></image>
			</view>
		</view>
		
		<!-- 音乐服务 -->
		<view class="sidebar_yinyue">
			<view class="sidebar_xinxi_head">
				<text>音乐服务</text>
			</view>
			<view class="sidebar_yinyue_1">
				<image src="../../static/sidebar/piao.png" mode="" class="sidebar_yinyue_image1"></image>
				<text class="sidebar_yinyue_text2">云村有票</text>
				<image class="sidebar_yinyue_image2" src="../../static/jiantou.png"></image>
			</view>
			<view class="sidebar_yinyue_1">
				<image src="../../static/sidebar/car.png" mode="" class="sidebar_yinyue_image1"></image>
				<text class="sidebar_yinyue_text2">商城</text>
				
				<image class="sidebar_yinyue_image2" src="../../static/jiantou.png"></image>
			</view>
			<view class="sidebar_yinyue_1 head">
				<image src="../../static/sidebar/game.png" mode="" class="sidebar_yinyue_image1"></image>
				<text class="sidebar_yinyue_text2">游戏专区</text>
				<image class="sidebar_yinyue_image2 " src="../../static/jiantou.png"></image>
			</view>
			<view class="sidebar_yinyue_1 head">
				<image src="../../static/sidebar/lindang.png" mode="" class="sidebar_yinyue_image1"></image>
				<text class="sidebar_yinyue_text2">口袋彩铃</text>
				<image class="sidebar_yinyue_image2 " src="../../static/jiantou.png"></image>
			</view>
		</view>
		<!-- 其他 -->
		<view class="sidebar_yinyue qita">
			<view class="sidebar_xinxi_head">
				<text>其他</text>
			</view>
			<view class="sidebar_yinyue_1">
				<image src="../../static/sidebar/shezhi.png" mode="" class="sidebar_yinyue_image1"></image>
				<text class="sidebar_yinyue_text2">设置</text>
				<image class="sidebar_yinyue_image2" src="../../static/jiantou.png"></image>
			</view>
			<view class="sidebar_yinyue_1">
				<image src="../../static/sidebar/yueliang.png" mode="" class="sidebar_yinyue_image1"></image>
				<text class="sidebar_yinyue_text2">夜间模式</text>
				
				<image class="sidebar_yinyue_image2" src="../../static/jiantou.png"></image>
			</view>
			<view class="sidebar_yinyue_1 head">
				<image src="../../static/sidebar/naozhong.png" mode="" class="sidebar_yinyue_image1"></image>
				<text class="sidebar_yinyue_text2">定时关闭</text>
				<image class="sidebar_yinyue_image2 " src="../../static/jiantou.png"></image>
			</view>
			<view class="sidebar_yinyue_1 head">
				<image src="../../static/sidebar/zhuti.png" mode="" class="sidebar_yinyue_image1"></image>
				<text class="sidebar_yinyue_text2">个性装扮</text>
				<image class="sidebar_yinyue_image2 " src="../../static/jiantou.png"></image>
			</view>
			<view class="sidebar_yinyue_1 head">
				<image src="../../static/sidebar/erji.png" mode="" class="sidebar_yinyue_image1"></image>
				<text class="sidebar_yinyue_text2">边听边存</text>
				<image class="sidebar_yinyue_image2 " src="../../static/jiantou.png"></image>
			</view>
			<view class="sidebar_yinyue_1 head">
				<image src="../../static/sidebar/xiangzi.png" mode="" class="sidebar_yinyue_image1"></image>
				<text class="sidebar_yinyue_text2">在线听歌免流量</text>
				<image class="sidebar_yinyue_image2 " src="../../static/jiantou.png"></image>
			</view>
			<view class="sidebar_yinyue_1 head">
				<image src="../../static/sidebar/ban.png" mode="" class="sidebar_yinyue_image1"></image>
				<text class="sidebar_yinyue_text2">音乐黑名单</text>
				<image class="sidebar_yinyue_image2 " src="../../static/jiantou.png"></image>
			</view>
			<view class="sidebar_yinyue_1 head">
				<image src="../../static/sidebar/baohu.png" mode="" class="sidebar_yinyue_image1"></image>
				<text class="sidebar_yinyue_text2">青少年模式</text>
				<image class="sidebar_yinyue_image2 " src="../../static/jiantou.png"></image>
			</view>
			<view class="sidebar_yinyue_1 head">
				<image src="../../static/sidebar/naozhong1.png" mode="" class="sidebar_yinyue_image1"></image>
				<text class="sidebar_yinyue_text2">音乐闹钟</text>
				<image class="sidebar_yinyue_image2 " src="../../static/jiantou.png"></image>
			</view>
		</view>
		<!-- 功能 -->
		<view class="sidebar_yinyue gongneng">
		<view class="sidebar_yinyue_1">
			<image src="../../static/sidebar/dingdan.png" mode="" class="sidebar_yinyue_image1"></image>
			<text class="sidebar_yinyue_text2">我的订单</text>
			<image class="sidebar_yinyue_image2" src="../../static/jiantou.png"></image>
		</view>
		<view class="sidebar_yinyue_1">
			<image src="../../static/sidebar/youhuiquan.png" mode="" class="sidebar_yinyue_image1"></image>
			<text class="sidebar_yinyue_text2">优惠券</text>
			
			<image class="sidebar_yinyue_image2" src="../../static/jiantou.png"></image>
		</view>
		<view class="sidebar_yinyue_1 head">
			<image src="../../static/sidebar/kefu.png" mode="" class="sidebar_yinyue_image1"></image>
			<text class="sidebar_yinyue_text2">我的客服</text>
			<image class="sidebar_yinyue_image2 " src="../../static/jiantou.png"></image>
		</view>
		<view class="sidebar_yinyue_1 head">
			<image src="../../static/sidebar/fenxiang.png" mode="" class="sidebar_yinyue_image1"></image>
			<text class="sidebar_yinyue_text2">分享网易云音乐</text>
			<image class="sidebar_yinyue_image2 " src="../../static/jiantou.png"></image>
		</view>
		<view class="sidebar_yinyue_1 head">
			<image src="../../static/sidebar/guanyu.png" mode="" class="sidebar_yinyue_image1"></image>
			<text class="sidebar_yinyue_text2">关于</text>
			<image class="sidebar_yinyue_image2 " src="../../static/jiantou.png"></image>
		</view>
		</view>
		
		<!-- 退出登录 -->
		<view class="button">
			<button>退出登录/关闭</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	
	// 黑胶vip
	.sidebar_vip{
		width: 560rpx;
		margin-left:20rpx;
		height:200rpx;
		border-radius: 30rpx;
		margin-top:20rpx;
		background-image: linear-gradient(#979798, #acacac);
		position: relative;
		image{
			width:140rpx;
			height:35rpx;
			position: absolute;
			top:30rpx;
			left:20rpx;
			
		}
	}
	.sidebar_vip_text1{
		width:130rpx;
		font-size: 20rpx;
		height:50rpx;
		border: 1px solid #efefef;
		border-radius: 30rpx;
		position: absolute;
		top:25rpx;
		right:20rpx;
		text-align: center;
		line-height: 40rpx;
		color: #efefef;
		opacity: 0.8;
		
	}
	.sidebar_vip_text2{
		position: absolute;
		top:70rpx;
		left: 20rpx;
		color: #efefef;
		font-size: 10rpx;
		opacity: 0.8;
	}
	.sidebar_vip_text3{
		position: absolute;
		top:150rpx;
		left: 20rpx;
		color: #efefef;
		font-size: 10rpx;
		opacity: 0.8;
	}
	.sidebar_xinxi{
		width:560rpx;
		height:300rpx;
		margin-top:20rpx;
		margin-left:20rpx;
		border-radius: 20rpx;
		background: #f4f4f4;
		.sidebar_xinxi_1{
			width:530rpx;
			height:98rpx;
			margin-left:30rpx;
			border-bottom:2px solid  #fff;
			position: relative;
			.sidebar_xinxi_image1{
			width:40rpx;
			height:40rpx;
			position: absolute;
			top:25rpx;
		}
		.sidebar_xinxi_text2{
			position: absolute;
			top:25rpx;
			left:60rpx;
		}
		.sidebar_xinxi_text1{
			width:30rpx;
			height:30rpx;
			border-radius: 50rpx;
			background: #fe3a3b;
			text-align: center;
			line-height: 30rpx;
			color: #fff;
			font-size: 10rpx;
			position: absolute;
			top:30rpx;
			right:60rpx;
		}
		.sidebar_xinxi_image2{
			width:30rpx;
			height:30rpx;
			position: absolute;
			top:30rpx;
			right:20rpx;
		}
		.yunbei{
		   width:200rpx;
		   position: absolute;
		   
		   top:28rpx;
		   right:10rpx;
		   font-size: 10rpx;
		   color:#999999;;
		}
		
		}
		
	}
	.head{
		border: none !important;
	}
	.qita{
		height:1000rpx !important;
	}
	.gongeng{
		height:500rpx !important;
	}
	.sidebar_yinyue{
		width:560rpx;
		height:470rpx;
		margin-top:20rpx;
		margin-left:20rpx;
		border-radius: 20rpx;
		background: #f4f4f4;
		.sidebar_yinyue_1{
			width:530rpx;
			height:98rpx;
			margin-left:30rpx;
			position: relative;
			.sidebar_yinyue_image1{
			width:40rpx;
			height:40rpx;
			position: absolute;
			top:25rpx;
		}
		.sidebar_yinyue_text2{
			position: absolute;
			top:25rpx;
			left:60rpx;
		}
		.sidebar_yinyue_text1{
			width:30rpx;
			height:30rpx;
			border-radius: 50rpx;
			background: #fe3a3b;
			text-align: center;
			line-height: 30rpx;
			color: #fff;
			font-size: 10rpx;
			position: absolute;
			top:30rpx;
			right:60rpx;
		}
		.sidebar_yinyue_image2{
			width:30rpx;
			height:30rpx;
			position: absolute;
			top:30rpx;
			right:20rpx;
		}
		.yunbei{
		   width:200rpx;
		   position: absolute;
		   
		   top:28rpx;
		   right:10rpx;
		   font-size: 10rpx;
		   color:#999999;;
		}
		
		}
		
	}
	.sidebar_xinxi_head{
		width:560rpx;
		height:80rpx;
		border-bottom: 2px solid #fff;
		position: relative;
		text{
			font-size: 10rpx;
			color: #cacaca;
			position: absolute;
			top:20rpx;
			left:40rpx;
		}
	}
	
	
	// 退出登录
	.button{
		button{
			margin-top:40rpx;
			margin-bottom: 100rpx;
			margin-left:20rpx;
			border-radius: 5px;
			background-color: #fdfdfd;
			width:560rpx;
			height:80rpx;
			color:#fe3a3b;
			font-size: 30rpx;
			
		}
	}
</style>
